<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>广告成效图表</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1" name="viewport">
    <link rel="stylesheet" href="../css/style.css">
    <script src="../plugins/echarts/echarts.js"></script>
</head>
<body class="hold-transition">
<div id="app">
    <div class="content-header">
        <h1>广告成效图表 <small></small></h1>
    </div>
    <div class="app-container">
        <div class="box">
            <!-- 折线图 -->
            <div id="adLineChart" style="height:600px;"></div>
        </div>
    </div>
</div>

<script src="../js/vue.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
    var adChart = echarts.init(document.getElementById('adLineChart'));

    axios.get('/echarts/loadAdEffectData').then((res) => {
        const data = res.data.data;

        adChart.setOption({
            title: {
                text: '广告效果对比折线图'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['曝光量', '点击量', '转化次数']
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                data: data.adNames
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '曝光量',
                    type: 'line',
                    data: data.pcount
                },
                {
                    name: '点击量',
                    type: 'line',
                    data: data.dcount
                },
                {
                    name: '转化次数',
                    type: 'line',
                    data: data.zcount
                }
            ]
        });
    });
</script>

<div id="platformBarChart" style="height: 600px;"></div>

<script>
    var chart = echarts.init(document.getElementById('platformBarChart'));

    axios.get('/echarts/loadPlatformEffectData').then(res => {
        const data = res.data.data;

        chart.setOption({
            title: {
                text: '各平台广告效果柱状图'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: { type: 'shadow' }
            },
            legend: {
                data: ['曝光量', '点击量', '转化次数']
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                data: data.platforms,
                axisLabel: {
                    rotate: 30
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: { color: '#333' },
                axisLine: { lineStyle: { color: '#555' } },
                splitLine: { lineStyle: { color: '#eee' } }
            },
            series: [
                {
                    name: '曝光量',
                    type: 'bar',
                    data: data.pcount,
                    barWidth: 35,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#4facfe' },
                            { offset: 1, color: '#00f2fe' }
                        ]),
                        borderRadius: [5, 5, 0, 0]
                    }
                },
                {
                    name: '点击量',
                    type: 'bar',
                    data: data.dcount,
                    barWidth: 35,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#43e97b' },
                            { offset: 1, color: '#38f9d7' }
                        ]),
                        borderRadius: [5, 5, 0, 0]
                    }
                },
                {
                    name: '转化次数',
                    type: 'bar',
                    data: data.zcount,
                    barWidth: 35,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#f093fb' },
                            { offset: 1, color: '#f5576c' }
                        ]),
                        borderRadius: [5, 5, 0, 0]
                    }
                }
            ]
        });
    });
</script>

<!-- 饼状图区域 -->
<div id="adPieChart" style="height: 600px;"></div>
<script>
    var pieChart = echarts.init(document.getElementById('adPieChart'));

    // 饼图调用独立接口获取平台曝光占比数据
    axios.get('/echarts/loadPlatformPieData').then(res => {
        const pieData = res.data.data; // 这是一个数组，每个元素形如{name: '平台名', value: 曝光量}

        pieChart.setOption({
            title: {
                text: '广告平台曝光占比',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: '曝光量',
                    type: 'pie',
                    radius: '60%',
                    data: pieData,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    label: {
                        formatter: '{b}: {d}%'
                    }
                }
            ]
        });
    });
</script>

</body>
</html>
